<template>
  <el-select v-model="deviceState" clearable filterable style="width: 350px;" @change="handleChange">
    <el-option
      v-for="state in deviceStateList"
      :key="state.value"
      :value="state.value"
      :label="state.label"
    />
  </el-select>
</template>

<script>

  export default {
    name: 'SelectDeviceState',
    model: {
      prop: 'value',
      event: 'change'
    },
    props: {
      value: { type: String, require: false, default: '' }
    },
    data() {
      return {
        deviceState: '',
        deviceStateList: []
      }
    },
    watch: {
      value() {
        this.deviceState = this.value
      }
    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.deviceStateList = [
          {
            value: 'ENABLE',
            label: '启用'
          },
          {
            value: 'DISABLE',
            label: '禁用'
          }
        ]
      },
      handleChange(value) {
        this.$emit('change', value)
      }
    }
  }
</script>

<style scoped></style>
